<template>
  <view class="container">
    <view class="header">
      <text class="title">申请学社</text>
    </view>
	<view class="task-info" >
		<view class="info-item">
			<view class="label">学社类别</view>
				<uni-data-select class="value"
				      v-model="form.tgsqXslb"
				      :localdata="xslbList"
				    ></uni-data-select>
			</view>
		<view class="info-item">
			<view class="label">学社名称</view>
			<uni-data-select class="value" @change="getLbGw"
			      v-model="form.tgsqXxsmc"
			      :localdata="xsxxList"
			    ></uni-data-select>
		</view>
		<view class="info-item">
			<view class="label">岗位名称</view>
			<uni-data-select class="value"
			      v-model="form.tgsqXgwmc"
			      :localdata="listGwxx"
			    ></uni-data-select>
		</view>
		<view class="info-item">
			<view class="label">岗位等级</view>
			<uni-data-select class="value"
			      v-model="form.tgsqXgwdj"
			      :localdata="djrange"
			    ></uni-data-select>
		</view>
    <view class="footer" >
      <!-- 这里可以添加按钮或其他交互元素 -->
      <button type="primary" @click="addTgsqform" v-if="open">提交申请</button>
    </view>
	</view>
  </view>
</template>

<script>
	import { addTgsq } from "@/api/admin/tgsq";
	import { allocatedUserList } from "@/api/system/role";
	import {listXslb,getXslb}from "@/api/admin/xslb"
	import {listXsxx,getXsxx}from "@/api/admin/xsxx"
	import {listGwxx,getGwxx}from "@/api/admin/gwxx"
	import { listTstg }from "@/api/admin/tstg";
	import store from "@/store";
export default {
  data() {
    return {
		open:true,
		form:{},
		//学社类别
		xslbList:[],
		//岗位信息
		listGwxx:[],
		//学社信息
		xsxxList:[],
		djrange:[ 
			{ value: 0, text: "初" },
          { value: 1, text: "中" },
          { value: 2, text: "高" },
			]
	};
  },
  onLoad() {
	      this.getlistGwxx();
	      this.getXsxxList();
	      this.getxslb();
		  this.getform()
  },
  methods: {
	  addTgsqform(){
		   addTgsq(this.form).then(response => {
		                this.open = false;
						// 处理按钮点击事件
						uni.showToast({
						title: '提交成功',
						icon: 'success',
						});
		              });
	  },
	  //获取并填充原学社信息
	  getform(){
		  const queryParams={
		          tstgXsxh: store.getters.name,
		          deletemark: null,
		        }
		  listTstg(queryParams).then(response=>{
		  	this.form.tgsqYxsmc=response.rows[0].tstgXsmc
			this.form.tgsqXsxm=response.rows[0].tstgXsxm
			this.form.tgsqXsxh=response.rows[0].tstgXsxh
			this.form.tgsqSsxy=response.rows[0].tstgSsxy
			this.form.tgsqSxzy=response.rows[0].tstgSxzy
			this.form.tgsqYgwdj=response.rows[0].tstgGwdj
			this.form.tgsqYgwmc=response.rows[0].tstgGwmc
			getXsxx(this.form.tgsqYxsmc).then(response=>{
			  this.form.tgsqYxsds=response.data.xsxxXsds
			})
		  })
	  },
	  //通过学社id查询学社导师
	  
    /** 查询学社类别 */
    getxslb() {
      this.loading = true;
      listXslb(this.queryParams).then(response => {
        //this.xslbList = response.rows;
		response.rows.forEach(item => {
				this.xslbList.push({
							value: item.id,
							text: item.xsglXslb
						})
				})
      });
    },
    //获取学社信息
    getXsxxList(){
      listXsxx().then(response => {
        //this.xsxxList = response.rows;
		response.rows.forEach(item => {
		this.xsxxList.push({
					value: item.id,
					text: item.xsxxXsmc
				})
		})
      });
    },
    //获取学社类别和下属岗位列表
    getLbGw(){
      getXsxx(this.form.tgsqXxsmc).then(response=>{
        this.form.tgsqXslb=response.data.xsxxXslb
        this.form.tgsqXsds=response.data.xsxxXsds
		console.log(this.form.tgsqXslb)
      })
      const queryParams={
        gwxxDyxs: this.form.tgsqXxsmc
      }
      listGwxx(queryParams).then(response => {
        this.form.tstgGwmc=null;
		this.listGwxx=[]
		response.rows.forEach(item => {
				this.listGwxx.push({
							value: item.id,
							text: item.gwxxGwmc
						})
				})
      })
    },
    //获取岗位信息
    getlistGwxx(){
      listGwxx().then(response => {
        //this.listGwxx = response.rows;
		response.rows.forEach(item => {
				this.listGwxx.push({
							value: item.id,
							text: item.gwxxGwmc
						})
				})
      });
    }
  },
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin: 30rpx 0;
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 24rpx;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #409eff;
  border-radius: 3rpx;
}

.task-info {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
  animation: slideIn 0.3s ease-out;
}

.info-item {
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #606266;
  width: 180rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.value {
  flex: 1;
  margin-left: 20rpx;
}

/* uni-data-select组件样式 */
.uni-data-select {
  width: 100%;
}

.uni-select--input {
  height: 80rpx;
  border: 2rpx solid #dcdfe6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #303133;
  background-color: #ffffff;
}

.uni-select--input-focused {
  border-color: #409eff;
}

.footer {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

button[type="primary"] {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #409eff;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 44rpx;
  transition: all 0.3s ease;
}

button[type="primary"]:active {
  transform: scale(0.98);
  background-color: #3a8ee6;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 错误状态样式 */
.error .uni-select--input {
  border-color: #f56c6c;
}

.error-message {
  font-size: 24rpx;
  color: #f56c6c;
  margin-top: 8rpx;
  margin-left: 180rpx;
}

/* 禁用状态样式 */
.info-item.disabled .uni-select--input {
  background-color: #f5f7fa;
  cursor: not-allowed;
  color: #909399;
}
</style>